<template>
    <div class='funeral_item_table'>
        <table-edit2 ref="tableEditss" :dataField="dataField" @removeItem="removeItem"   :listField="listField"  :data="data"   isAdd="N"></table-edit2>
        
        <el-button type="success" icon="el-icon-goods" circle style='position:absolute;bottom:50px;right:50px' @click="drawer=true" title="点击选择服务项目"></el-button>
        <el-drawer
            title="服务项目选择"
            :visible.sync="drawer"
            :direction="direction"
            size="800px"
            append-to-body>
            <div class="left_menu">
                <order-food-select-show :appid="appid" @addItem="addItem"  :data="data" :dataField="dataField" type="餐饮"></order-food-select-show>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import tableEdit2  from '../edit/tableEdit2.vue'
import OrderFoodSelectShow  from '../byg/OrderFoodSelectShow.vue'
export default {
    props:['dataField','listField','data','params','appid'],
    name:'order-food',
    components: {
       tableEdit2,
       OrderFoodSelectShow
    },
    data(){
        return{
            showtable:false,
            drawer: false,
            direction: 'rtl',
            change:false
        }
    },
    created(){
      
        
        this.$parent.$el.getElementsByClassName("el-card__body")[0].style.paddingBottom="0";
       
    },
    
    methods:{
       
        addItem(item){
            let items=JSON.parse(item);
            this.$set(this.data[this.dataField],this.data[this.dataField].length,items.data);
            items.row.szi_ex20=items.data.of_dat1+"#"+items.data.of_ex1+"#"+items.data.of_ex2;
            console.log("order_food===============================================");
            console.log(items);
            this.$set(this.data["item"],this.data["item"].length,items.row)
            this.drawer=false;
        },
        removeItem(item){
            let items=JSON.parse(item);
            let szi_ex20=items.of_dat1+"#"+items.of_ex1+"#"+items.of_ex2;
            let index=-1;
            for(let i=0;i<this.data["item"].length;i++){
                let row=this.data["item"][i];
                if(row.szi_ex20==szi_ex20){
                    index=i;
                }
            }
            if(index>=0){
                this.$delete(this.data["item"],index);
            }
        }
        
    }
}
</script>
<style scoped>
.funeral_item_table{
    height:100%;
    display:flex;
    flex-direction: column;
    overflow:hidden;
    position:relative;
}
.tableEdit{
    flex:1;
}
.amt_total{
    height:40px;
    border:1px solid #ddd;
    line-height:20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: right;
    background:#ddd;
    -moz-box-shadow: 2px 2px 10px #909090;
   -webkit-box-shadow: 2px 2px 10px #909090;
   box-shadow:2px 2px 10px #909090;

}
.amt_total_item{
    
    padding:10px;
}

</style>
<style >
.el-drawer{
   /* width:800px !important;*/
}
.el-drawer__header{
    margin-bottom:0 !important;
    padding:10px 10px 0 !important;
}
.el-card__header{
    padding:5px 5px !important;
}
.el-card__body{
    padding-top:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}
</style>
<style >

</style>